<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>lotex.Report</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- LIBS -->
<script type="text/javascript" src="../../jquery-latest.pack.js"></script>
<script type="text/javascript" src="../../jquery-plugins.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-jquery-adapter.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>

<link rel="stylesheet" type="text/css" href="forms.css" />
<!--script type="text/javascript" src="msg-box.js"></script>
<script src="dojo-charting.js"></script-->


<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
<style>
    .lx-form {
        border:1px solid #C3DAF9;
    }
    #container {
        margin:12px;
        width:600px;
        height:400px;
        background-color:#ccc;
    }
    #formTest1 {
        width:700px;
        height:400px;
        background-color:#dedeed;
        border:1px solid #999;
    }
    .rect1 {
        fill: red;
        stroke: blue;
        stroke-width: 3
    }
    .blist .x-btn-text {
        background-image: url(list-items.gif)
    }
    .bmenu .x-btn-text {
        background-image: url(menu-show.gif)
    }
    .menu-title{
        background: #ebeadb url(../../resources/images/aero/grid/grid-hrow.gif) repeat-x;
        border-bottom:1px solid #99bbe8;
        color:#15428b;
        font:bold 12px tahoma,arial,verdana,sans-serif;
        display:block;
        padding:3px;
    }
</style>
</head>
<body>

<!--script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<div id="rpt"></div>
<button id="mb1">显示表单</button>

<div id="container">
</div>

<div id="testQueryForm"></div>

<div id="testSheetToTabel"></div>
<!-- comments dialog -->
<div id="comments-dlg" style="visibility:hidden;">
    <div class="x-dlg-hd">图表选项</div>
    <div class="x-dlg-bd">
        <div id="post-tab" class="x-dlg-tab" title="基本设置">
            <div class="inner-tab">
            <div id="form-ct4"></div>
            </div>
        </div>
        <div id="view-tab" class="x-dlg-tab" title="高级设置">
            <ul id="comments-list" class="inner-tab">
            </ul>
        </div>
    </div>
    <div class="x-dlg-ft">
        <div id="dlg-msg">
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="lotex-all.js"></script>
<script type="text/javascript">
var ns = lotex;
var chartForm = [
    {
        group:"图表类型",
        elements: [{
            name:"form-type",
            value:'pie',
            type:"Radio",
            fieldLabel:'饼图',
            setter: "type",
            getter: function(obj) {
                if(this.getValue()) obj.type = "pie";
            }
        },{
            name:"form-type",
            value:'line',
            type:"Radio",
            fieldLabel:'线图',
            setter: "type",
            getter: function(obj) {
                if(this.getValue()) obj.type = "line";
            }
        }]
    },{
        group:"图表大小",
        elements: [
        {
            name:"form-height",
            type:"TextField",
            fieldLabel:'高',
            allowBlank:false,
            width:50,
            setter: "height",
            getter: function(obj) {
                if(this.getValue().length>0) obj.height = this.getValue();
            }
        }]
    },
    {
        name:"form-height2",
        type:"TextField",
        fieldLabel:'高',
        allowBlank:false,
        width:50,
        setter: "height",
        getter: function(obj) {
            if(this.getValue().length>0) obj.height = this.getValue();
        }
    }
];
/*
chartForm = [
    {
        name:"form-height",
        type:"TextField",
        fieldLabel:'高',
        allowBlank:false,
        width:50,
        setter: "height",
        getter: function(project) {
            if(this.getValue().length>0) project.height = this.getValue();
        }
    }
];
*/
var qm = function() {
    var a = 10;
    this.pc = "Pcommit";
    function _pcommit() {
        alert(this.pc);
    };
    return {
        set: function(v) {
            a = v;
        },
        print: function() {
            alert(a);
        },
        commit: function() {
            this._commit();
        },
        _commit: function() {
            alert("commit");
        },
        pcommit: function() {
            _pcommit();
            alert(this.pc);
        }
    };
}
var QueryFormCount = 0;

var queryForm = function() {
    var _node = null;       // dom node for rend form
    var project;    // object for config
    var dialog;     // dialog window handler
    // form elements config and cache for fast access
    var _formConfig,formCfgCache = {};
    // form elements UI cache
    var formCtrls = {};

    function getNode() {
        if (_node!=null) return _node;
        alert("TODO getNode()");
    }

    var createFormUI = function(cfg) {
        cfg.ctrl = new Ext.form[cfg.type](cfg);
        cfg.getValue = new Function(
            'return this.ctrl.getValue()');
        return cfg.ctrl;
    };
    var getSID = function(cfg) {
        if (!("sid" in cfg)) {
            cfg.sid = "l-cf-el-" + QueryFormCount ++;
        }
        return cfg.sid;
    };
    var getFormUI = function(cfg) {
        var sid = getSID(cfg);
        if (sid in formCtrls) return formCtrls[sid];
        formCfgCache[sid] = cfg;
        formCtrls[sid] = createFormUI(cfg);
        return formCtrls[sid];
    };
    var isGroup = function(cfg) {
        return "group" in cfg;
    };
    var setValue = function() {
        for (name in formCfgCache) {
            var cfg = formCfgCache[name];
            var ivalue = null;
            if(ns.type(cfg.setter) == 'function') {
                ivalue = cfg.setter(project);
            } else {
                // 从项目中得到参数值
                var getFromField = (ns.type(cfg.setter) == 'string')
                    ? cfg.setter : name;
                if(getFromField in project) {
                    if (cfg.type == "Radio") ivalue = (project[getFromField] == cfg.value);
                    else ivalue = project[getFromField];
                }
            }
            getFormUI(cfg).setValue(ivalue);
        }
    };
    return {
        setNode: function(node) {
            _node = node;
        },
        config: function(cfg) {
            _formConfig = cfg;
        },
        commit: function() {alert("commit!");},
        render: function() {
            var form = new Ext.form.Form({
                labelAlign: 'left',
                labelWidth: 120
            });
            for(var i=0,l=_formConfig.length;i<l;i++) {
                var cfg = _formConfig[i];
                if (isGroup(cfg)) {
                    var fs = new Ext.form.FieldSet({legend:cfg.group});
                    form.start(fs);

                    for(var j=0,h=cfg.elements.length;j<h;j++) {
                        var ele = cfg.elements[j];
                        form.add(getFormUI(ele));
                    }
                    form.end();
                } else {
                    var ctrl = getFormUI(cfg);
                    form.add(ctrl);
                }
            }
            //form.addButton('Save');
            //form.addButton('Cancel');
            form.addButton('查询', this.commit, this);
            form.render(getNode());
            //alert("red");
        },
        getValue: function() {
            var value = {};
            for (name in formCfgCache) {
                formCfgCache[name].getter(value);
            }
            return value;
        }
    };
}


var QueryManager = function(){
    var project, dialog;
    // 管理多个_formConfig时，该缓存会造成重名混乱问题
    var formCtrls = {};
    var _formConfig, formCfgCache = {};

    _formConfig = chartForm;

    var createFormUI = function(cfg) {
        cfg.ctrl = new Ext.form[cfg.type](cfg);
        cfg.getValue = new Function(
            'return this.ctrl.getValue()');
        return cfg.ctrl;
    };
    var getSID = function(cfg) {
        if (!("sid" in cfg)) {
            cfg.sid = "l-cf-el-" + QueryFormCount ++;
        }
        return cfg.sid;
    };
    var getFormUI = function(cfg) {
        var sid = getSID(cfg);
        if (sid in formCtrls) return formCtrls[sid];
        formCfgCache[sid] = cfg;
        formCtrls[sid] = createFormUI(cfg);
        return formCtrls[sid];
    };
    var isGroup = function(cfg) {
        return "group" in cfg;
    };
    var createDialog = function() {
        var form = new Ext.form.Form({
            labelAlign: 'left',
            labelWidth: 120
        });

        for(var i=0,l=_formConfig.length;i<l;i++) {
            var cfg = _formConfig[i];
            if (isGroup(cfg)) {
                var fs = new Ext.form.FieldSet({legend:cfg.group});
                form.start(fs);

                for(var j=0,h=cfg.elements.length;j<h;j++) {
                    var ele = cfg.elements[j];
                    form.add(getFormUI(ele));
                }
                form.end();
            } else {
                var ctrl = getFormUI(cfg);
                form.add(ctrl);
            }
        }
        /*
        project.fieldset(
            {legend:'图表类型'}, dc("line"), dc("pie")
        );
        project.fieldset(
            {legend:'尺寸'}, dc("height"),
            new Ext.project.DateField({
                fieldLabel: 'Date of Birth<br />(年-月-日)',
                name: 'dob',
                width:100,
                format : "Y-m-d",
                boxLabel : "年-月-日",
                value: '2007-05-01',
                allowBlank:false
            })
        );
        */
        form.render('form-ct4');
        dialog = new Ext.BasicDialog("comments-dlg", {
                autoTabs:true,
                width:360,
                height:450,
                modal: true,
                shadow:true//,
                //minWidth:300,
                //minHeight:300
        });
        dialog.addKeyListener(27, dialog.hide, dialog);
        dialog.addButton('取消修改', dialog.hide, dialog);
        dialog.addButton('应用设置', commit, this);
    };
    var setValue = function() {
        for (name in formCfgCache) {
            var cfg = formCfgCache[name];
            var ivalue = null;

            if(ns.type(cfg.setter) == 'function') {
                ivalue = cfg.setter(project);
            } else {
                // 从项目中得到参数值
                var getFromField = (ns.type(cfg.setter) == 'string')
                    ? cfg.setter : name;
                if(getFromField in project) {
                    if (cfg.type == "Radio") ivalue = (project[getFromField] == cfg.value);
                    else ivalue = project[getFromField];
                }
            }

            getFormUI(cfg).setValue(ivalue);
        }
    };
    function getValue() {
        var value = {};
        for (name in formCfgCache) {
            formCfgCache[name].getter(value);
        }
        return value;
    }
    var commit = function () {
        var value = getValue();
        console.debug(value);
        //project.set(getValue());
    };
    return {
        manage: function(obj) {
            project = obj;
            if (dialog==null) createDialog();
            setValue();
            //var tabs = ChartMan.dialog.getTabs();
            //tabs.activate('view-tab');
            dialog.el.repaint();
            dialog.show();

        }
    };
}();

var form = {
    type: 'line',
    height: 200
};

Ext.onReady(function(){
    var q1 = new queryForm();
    q1.setNode("testQueryForm");
    q1.config(chartForm);
    q1.render();
    Ext.get('mb1').on('click', function(e){
        QueryManager.manage(form);
    });
});
</script>
